
var updateInterval = 500; 
var clientCount = 0;


var $display;
var $tcardTemplate;
var $clientCountLabel;

$(window).load(initializeDisplay);

function initializeDisplay()
{
	// Do any required setup here.
	$display = $('#tcardsDisplay');
	$clientCountLabel = $('#clientCountLabel');
	$tcardTemplate = $.createTemplateURL('/public/jtemplates/tcard.jtpl');
	
	populateAllCards();
	checkForUpdates();
}

function populateAllCards()
{
	$.getJSON('/populate', function(data) {
		$.each(data, updateCard);
	});
}

function checkForUpdates()
{
	window.setTimeout(function() {
		$.getJSON('/update', function(data) {
			$.each(data, processCommand);
		});		
		
		// Note:  this function is recursive!  This is better than using setInterval because 
		// it accounts for situations where the function doesn't complete in time.
		checkForUpdates();
	}, updateInterval);
}

function processCommand(index, command)
{
	if(command.command == "TcardUpdate")
	{
		$.each(command.tcards, updateCard);
	}
	else if (command.command == "TcardDelete")
	{
		$.each(command.tcards, deleteCard)
	}
	else if (command.command == "OpenTcard")
	{
		openTcard(command.specificTcardId);
	}	
	else if (command.command == "CloseTcard")
	{
		closeTcard(command.specificTcardId); 
	}
	else if (command.command == "Handshake")
	{
		clientCount += 1;
		$clientCountLabel.text(clientCount); 
	}
	else if (command.command == "CloseConnection")
	{
		clientCount -= 1;
		$clientCountLabel.text(clientCount); 
	}
}

function updateCard(index, tcardData)
{
	var $tcard = $('#tcard_' + tcardData.id);
	var remainOpen = false;
	
	// If card isn't already on the page, create it's structure and then update it
	if($tcard.size() == 0)
	{
		$tcard = createCard(tcardData);
		$tcard.fadeIn(1000);
	}
	else
	{
		$tcard = $tcard.parent();
		remainOpen = $tcard.find('.tcardDetails').css('display') == 'block';

		// Check for status change, and move the template if needed
		if(statusChanged(tcardData, $tcard))
		{
			assignStatus($tcard, tcardData.status, false);
		}		
	}
	
	$tcard.processTemplate(tcardData);
	
	if(remainOpen)
		openTcard(tcardData.id);
}

function createCard(tcardData)
{
	// Creating cards using the JTemplates library	
	var $tcard = $('<div>').hide().setTemplate($tcardTemplate);	
	assignStatus($tcard, tcardData.status, true);
	
	return $tcard;
}

function deleteCard(index, tcardData)
{
	getTcard(tcardData.id).remove();
}

function openTcard(tcardId)
{
	getTcard(tcardId).find('.tcardDetails').slideDown(500);
}

function closeTcard(tcardId)
{
	getTcard(tcardId).find('.tcardDetails').slideUp(500);
}

function statusChanged(tcardData, $tcard)
{
	return tcardData.status != $tcard.find('span[title="status"]').text();
}

function assignStatus($tcard, statusName, isNew)
{
	var $status = $('#status_' + statusName).find('.statusContent');
	
	if($status.size() == 0)
	{
		alert("Cannot assign to status: " + statusName);
		return;
	}
		
	if(isNew)
		$status.append($tcard);
	else
	{
		$tcard.fadeOut(500, function() {
			$status.append($tcard);
			$tcard.fadeIn(500);
		});
	}
}

function getTcard(tcardId)
{
	var $tcard = $('#tcard_' + tcardId);
	if($tcard.size() == 0)
	{
		alert("Tcard not found: " + tcardId);
		return null;
	}
	return $tcard;	
}

function JSONDate(jsonDate)
{
	return new Date(jsonDate);
}
